<template>
  <div class="home">
    <h1>商品列表</h1>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="c">
      <div class="top">
       <el-button type="primary" @click="AddCateOk">添加分类</el-button>
      </div>
      <div class="bottom">
        <!-- 表格 -->

        <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="cat_id"
        border
        :tree-props="tableDataPr"
        class="mx16"
      >
        <el-table-column type="index" label="#">
          <template slot-scope="scope">
            <div>
              {{ scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted"></i>
            <i class="el-icon-error" v-else></i>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="排序">
          <template slot-scope="scope">
            <el-tag :type="type[scope.row.cat_level]" size="small" effect="dark"
              >{{ scope.row.cat_level |Fil }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="CateBjOk(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="CateRomOk(scope.row.cat_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

         <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="data.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 添加弹出框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动名称" prop="cat_name">
            <el-input v-model="ruleForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-cascader
              clearable
              v-model="value"
              :options="options"
              :props="propsCas"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleOk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑弹出框 -->
      <el-dialog title="提示" :visible.sync="dialogVisibleBj" width="30%">
        <el-form
          :model="inpt"
          :rules="rules"
          ref="ruleFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="inpt.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleBj = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleBjOk">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { getcategoriea, deletecategories,PutCateApi,PutCateApia } from "@/Api";
export default {
  data() {
    return {
      // 编辑弹出框显示隐藏
      dialogVisibleBj: false,
      // 三级联动渲染数据
      options: [],
      // 三级联动数据绑定
      value: [],
      // 三级联动属性
      propsCas: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: "true",
      },
      // 添加双向数据绑定
      ruleForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      // 正则验证
      rules: {
        cat_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
      },
      // 弹出框显示隐藏
      dialogVisible: false,
      // tab渲染数据
      tableData: [],
      // tab配置
      tableDataPr: {
        children: "children",
        hasChildren: "hasChildren",
        label: "label",
        value: "value",
      },
      //   分页总数
      total: 0,
      data: {
        type: 3,
        pagenum: 1,
        pagesize: 10,
      },
      // 标签颜色
      type: [, "success", "warning"],
      inpt: {
        // 编辑input
        cat_name: "",
        // 编辑id
        id: 0,
      },
    };
  },
  mounted() {
    this.getcategories();
    this.GetCate();
  },

  //   过滤器
  filters: {
    filterstime(val) {
      let times = new Date(val * 1000).toLocaleString();
      return times;
    },
  },
  methods: {
     // 提交编辑数据
    async dialogVisibleBjOk() {

      
      let res = await PutCateApia(this.inpt);
      this.dialogVisibleBj = false;
       if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.getcategories();
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
           this.getcategories();
        }
    
    },
    // 编辑
    CateBjOk(e) {
      this.inpt.cat_name = e.cat_name;
      this.inpt.id = e.cat_id;
      this.dialogVisibleBj = true;
    },
    // 删除
    async CateRomOk(e) {
      // console.log(e);
      let res = await deletecategories(e);
    //  console.log(res);
       if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.getcategories();
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
           this.getcategories();
        }
    },
    // 点击确定添加
    dialogVisibleOk() {
      this.$refs.ruleFormRef.validate(async (valida) => {
        if (!valida) return;
        // this.ruleForm.cat_pid = this.value[this.value.length - 1];
        //   this.ruleForm.cat_level = 2;
      this.ruleForm.cat_pid = this.value[this.value.length - 1];
          this.ruleForm.cat_level = 2;
          let res = await PutCateApi(this.ruleForm);
             this.dialogVisible = false;
              if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.getcategories();
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
           this.getcategories();
        }
          this.getcategories();
        // if (this.value.length >= 1) {
        //   this.ruleForm.cat_pid = this.value[this.value.length - 1];
        //   this.ruleForm.cat_level = 2;
        // console.log(this.ruleForm,'22222222222222');
        //   let res = await PutCateApi(this.ruleForm);
        //   // console.log(res);
        //   this.ruleForm.cat_pid = 0;
        //   this.ruleForm.cat_level = 0;
          this.ruleForm.cat_name = "";
          this.value = [];
        //   this.dialogVisible = false;
        //   this.getcategories();
        // } else {
        //     console.log(this.ruleForm,'111111111111');
        //   let res = await PutCateApi(this.ruleForm);
        //   // console.log(res);
        //   this.ruleForm.cat_pid = 0;
        //   this.ruleForm.cat_level = 0;
        //   this.ruleForm.cat_name = "";
        //   this.value = [];
        //   this.dialogVisible = false;
        //   this.getcategories();
        // }
      });
    },
    // 渲染二级数据
    async GetCate() {
      let data = {
        type: 2,
      };
      let res = await getcategoriea(data);
      console.log("GetCate", res);
      this.options = res.data;
    },
    // 改变三级联动触发
    handleChange(e) {
      console.log("gaibian", e);
      console.log(this.value);
      this.value=e
    },
    // 点击出现添加弹出框
    AddCateOk() {
      this.dialogVisible = true;
    },
    // 获取列表数据初始化渲染
    async getcategories() {
      let res = await getcategoriea(this.data);
      // console.log(res);
      res.data.result.forEach((item, index) => {
        item.index = index + 1;
        // console.log(item);
      });
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
    // 每页显示多少条是触发
    handleSizeChange(e) {
      // console.log(e);
      this.data.pagesize = e;
      this.getcategories();
    },
    // 改变当前显示第几页
    handleCurrentChange(e) {
      // console.log(e);
      this.data.pagenum = e;
      this.getcategories();
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
h1 {
  color: #fff;
}
.c {
  // background-color:;
  margin-top: 10px;
}
.input-with-select {
  width: 30%;
}
.top {
  display: flex;
  margin-bottom: 15px;
}
.btn {
  margin-left: 10px;
}
</style>
